<html>
<head>
<title>Project BlimBlam</title>


<style type="text/css">

p {
	font:25px black trebuchet;
	font-face:bold;
}

body {
	background-image:url('http://static1.grsites.com/archive/textures/beige/beige114.jpg');
	overflow-x:hidden;
}

#forumOverflow {
	height: 270;
	overflow:auto;
}

#groupOverflow {
	height:140;
	overflow:auto;
}

#sidebar {
	width:20%;
	padding:20;
	position: absolute;
	top: 10px;
	left: 30px;
	background-color:#ffcc66;
}

#groupBox {
	width:50%;
	height:170;
	padding:20;
	position:relative;
	left:22%;
	font-size:18px;
	font-family:trebuchet;
	background-color:#ffcc66;
}

#groupLabel {
	font:25px black trebuchet;
}

#forumBox {
	width:50%;
	height:300;
	padding:20;
	position:relative;
	left:22%;
	font-size:25px;
	font-family:trebuchet;
	background-color:#ffcc66;
}

#profilePic {
	width:200px;
	height:200px;

</style>

<script type="text/javascript">
function databaseInfo() {
	//draw in the database here and assign the needed variables
	//need one for the username
	//return a list
	var name = "Dianna Kay";
	return name;
}
</script>

</head>
<body scroll="no">

<fieldset id="sidebar">
	<center>
	<img src="faceless.jpg" alt="User's Profile Picture" hspace="20" id="profilePic"><br /> 

	
	<p><script type="text/javascript">
		var info = databaseInfo()  
		document.write("- " + info + " -");
	</script> </p>
	<a href="editProfile.html">Edit Profile</a> &nbsp &nbsp <a href="createGroup.html">Create New Group</a><br />
	<div id="gadget"><script src="http://www.gmodules.com/ig/ifr?url=http://www.schulz.dk/pacman.xml&amp;up_LANG=en&amp;synd=open&amp;w=260&amp;h=340&amp;title=PacMan+v2.6&amp;lang=all&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js" id="gadgets"></script></div><br />
	<img src="prev.gif" id="prevbutton"><img src="next.gif" id="nextbutton">
	</center>
</fieldset>
	
<table cellmargin="20" border="0">
	<tr>
		<td><img src="blimblamlogo.png" align="right" hspace="500" border='0'></td>
	</tr>
	<tr height="200px" align="top">
		<td id="groupCell">
			<fieldset id="groupBox">
				<legend id="groupLabel">&nbsp My Groups &nbsp </legend>
				<div id="groupOverflow"></div>
			</fieldset>
		</td>
	</tr>
	<tr height="400px">
		<td id="forumCell">
			<fieldset id="forumBox">
				<legend>&nbsp Forum &nbsp </legend>
				<div id="forumOverflow">
					<textarea cols ='100' rows='10' disabled></textarea> <input type="submit" value="Send" id="sendButton" />
					<textarea cols ='100' rows='2'></textarea>
				</div>
			</fieldset>
		</td>
	</tr>
</table>

<script type="text/javascript">

var nextButton = document.getElementById('nextbutton');

currentIndex = 0;

nextButton.onclick = switchGadget;

function switchGadget(event) {

	//var scriptSrc = document.getElementById('gadgets');
	var scriptSrc = document.getElementById('gadget').innerHTML
	document.write(scriptSrc);
	//document.write(scriptSrc.src);
	var gamesArray = [
"'http://www.gmodules.com/ig/ifr?url=http://www.schulz.dk/pacman.xml&amp;up_LANG=en&amp;synd=open&amp;w=290&amp;h=340&amp;title=PacMan+v2.6&amp;lang=all&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js',script src='http://www.gmodules.com/ig/ifr?url=http://www.counttonine.com/google-sudoku.xml&amp;up_difficulty=easiest&amp;synd=open&amp;w=320&amp;h=370&amp;title=Sudoku&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js', 'http://www.gmodules.com/ig/ifr?url=http://throttled.org/googlegadgets/youtubesearch.xml&amp;synd=open&amp;w=320&amp;h=250&amp;title=Search+YouTube&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js','http://www.gmodules.com/ig/ifr?url=http://bejeweledg.googlecode.com/svn/trunk/bejeweled.xml&amp;synd=open&amp;w=320&amp;h=270&amp;title=Bejeweled&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js']
	
	if (event.target.id == "nextbutton") {
		currentIndex ++;
	} else if (event.target.id == "prevbutton") {
		currentIndex --;
	}
	scriptSrc.src = gamesArray[currentIndex];
	//document.write("<br />" + scriptSrc.src);
	

} 





</script>
</body>
</html>